<template>
	<view :class="{bg141414:theme}" style="min-height: 100vh;">

		<view class="con pb200">
			<back :title="info.union_status_text" right="60" @tapright="tapright">
				<view :style="{color:info.union_status_text=='待付款'?'#000':'#fff'}"  class="size26">取消订单</view>
			</back>
			<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="  ra20">
				<view class="flex pb30" style="border-bottom:1px dashed #E1E1E1;">
					<image mode="" class="wh150-150 ra20 image" :src="info.thumb"></image>
					<view class="ml15">
						<view class="bold size30">{{info.title}}</view>
						<view class="size22  flex">
							<view :class="theme?'bg292929 colorfff':'bgfff'" class=" mt10 mb10  color999">
								{{is_box==1?'盲盒':'数字藏品'}}
							</view>
						</view>
						
					</view>
				</view>
			
			</view>
			<view  class="borderE1E1E1 pg30-30 ra20 mt30">
				<view class=" size30 bold">订单信息</view>
				<view class=" mt40 size26">
					<view  class="flex-ju-b   mt40">
						<view class="color999">订单编号</view>
						<view class="srgb size24 pg10-20 ra10" >
							{{info.number}}
						</view>
					</view>
					
					<view  class="flex-ju-b ">
						<view class="color999">购买数量</view>
						<view class="srgb size24 pg10-20 ra10" >
							{{info.total}}
						</view>
					</view>
					<view  class="flex-ju-b ">
						<view class="color999">合并支付</view>
						<view class="srgb size24 pg10-20 ra10" >
							<text class="size27">¥</text>{{info.order_money_price / 100}}
						</view>
					</view>
					<view  class="flex-ju-b ">
						<view class="color999">创建时间</view>
						<view class="srgb size24 pg10-20 ra10" >
							{{info.created_at}}
						</view>
					</view>
				</view>
			</view>

			<view v-if="info.union_status_text=='待付款'" class=" posifi width92vw bottom0 ">
				<view class="ra20 flex-ju-b pg30 bgfff height80"
					style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
					<view @click="tapzhifu" class=" flex1 height100 bg000 colorfff ra20 flex-ju-c  flex-col size30  ">
						<view class="bold">立即支付</view>
						<view class="size25 flex-a-i">订单待支付剩余时间
						<uni-countdown padding="0"  
							 :showDay="false" color="#fff" splitorColor="#fff" :showHour="false"
							:minute="info.minute" :second="info.second">
						</uni-countdown>
						</view>
					</view>
				</view>
			</view>
			<view v-else class=" posifi width92vw bottom0 ">
				<view class="ra20 flex-ju-b pg30 bgfff height80"
					style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
					<view @click="backdf" class=" flex1 height100 bg000 colorfff ra20 flex-ju-c  flex-col size30  ">
						<view class="bold">确定</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				theme: uni.getStorageSync('theme'),
				info:{}
			}
		},
		onLoad(e) {
			this.info = JSON.parse(e.item)
			console.log(this.info)
			
			this.info.auto_closed = this.istime(this.info.auto_closed_at)
			var time = (new Date(this.info.auto_closed_at.replace(/-/g, '/')).getTime() -
				new Date().getTime()) / 1000
			if (time > 0) {
				this.info.minute = parseInt((time / 60) % 60)
				this.info.second = parseInt(time % 60)
			}
		},
		methods: {
			tapright(){
				
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗',
					success: (res) => {
						if (res.confirm) {
							this.http('order/change/' + this.info.uuid, {}, 'post').then(res => {
								var pages = getCurrentPages();
								var page = pages[pages.length - 2];
								page.$vm.cencel=true
								
								this.info.union_status_text = '已关闭'
								this.info.status = '2'
								uni.showToast({
									title: '取消成功！',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			tapzhifu(){
				var url = 'pages/user/order/index'
				// #ifdef APP-PLUS
				url = "back.html?order=1"
				// #endif
				
					this.http(`order/payment-config/${this.info.uuid}`, {
						url,
					},'post').then(res => {
						this.topay(res.data.pay_url)
					})
			},
			backdf(){
				uni.reLaunch({
					url:"/pages/user/index"
				})
			}
		}
	}
</script>

<style>

</style>
